<template>
	<view>
		<view class="title">
			{{goodData.title}}
		</view>
		<view class="goodsListOne" v-if="type==1 && isshow">
			<view class="goodsItem" ref="goodsItem" v-for="(item,index) in listData" :key="index" @click="gogoodsdetail(item.ID)">
				<view class="goodsImage">
					<image :src="item.img" mode="aspectFit"></image>
				</view>
				<view class="goodsDetail">
					<view class="goodsName textsl2">
						{{item.name}}
					</view>
					<view class="bottomPrice">
						<view class="left">
							<view class="price">
								￥<text>{{formatNumber(item.price+item.coupon)}}</text>
							</view>
							<view class="money">
								￥{{item.market}}
							</view>
						</view>
						<view class="btn">
							已售{{item.sales+item.virtually_sales}}
						</view>
					</view>
					<view class="bottomPrice">
						<view class="left">
							<view class="price" style="font-size: 12px;margin-right: 5px;">
								现金:{{item.price}}
							</view>
							<view v-if="item.coupon>0" class="price" style="font-size: 12px;">
								{{item.is_single==4?'dl':'zkfc'}}:{{item.coupon}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="goodsList" v-if="type==2 && isshow">
			<view class="goodsItem" ref="goodsItem" v-for="(it,index) in listData" :key="index" @click="gogoodsdetail(it.ID)">
				<view class="goodsImage">
					<image :src="it.img" mode="aspectFit"></image>
				</view>
				<view class="goodsDetail">
					<view class="goodsName textsl2">
						{{it.name}}
					</view>
					<view class="bottomPrice">
						<view class="left">
							<view class="price">
								￥<text>{{formatNumber(it.price+it.coupon)}}</text>
							</view>
							<view class="money">
								￥{{it.market}}
							</view>
						</view>
						<view class="btn">
							已售{{it.sales+it.virtually_sales}}
						</view>
					</view>
					<view class="bottomPrice">
						<view class="left">
							<view class="price" style="font-size: 12px;margin-right: 5px;">
								现金:{{it.price}}
							</view>
							<view v-if="it.coupon>0" class="price" style="font-size: 12px;">
								{{it.is_single==4?'dl':'zkfc'}}:{{it.coupon}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
<!-- 		<view v-if="type==3 && isshow" style="display: flex; justify-content: space-between;">
			<waterfall :group="2" :list="listData" :pageSize="pageSize"></waterfall>
		</view> -->
		<view v-if="type==3  && isshow" style="display: flex; justify-content: space-between;padding: 20upx;">
					<view  class="goodsLists" v-for="items in waterfall" :key="item">
						<view class="goodsItems" ref="goodsItem" v-for="item in items" :key="item.ID" @click="$goURl(`/pages/commodity/details?id=${item.ID}`)">
							<view class="goodsImage">
								<image :src="item.img"  mode="aspectFit"></image>
							</view>
							<view class="goodsDetail">
								<view class="goodsName textsl2">
									{{item.name}}
								</view>
		<!-- 					<view class="securities">
								<text>劵</text>满90减20
							</view> -->
								<view class="bottomPrice">
									<view class="left">
										<view class="price">
											￥<text>{{formatNumber(item.price+item.coupon)}}</text>
										</view>
										<view class="money">
											￥{{item.market}}
										</view>
									</view>
								<view class="btn">
									已售{{item.sales+item.virtually_sales}}
								</view>
								</view>
								<view class="bottomPrice">
									<view class="left">
										<view class="price" style="font-size: 12px;margin-right: 5px;">
											现金:{{item.price}}
										</view>
										<view v-if="item.coupon>0" class="price" style="font-size: 12px;">
											zkfc:{{item.coupon}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
	</view>
</template>

<script>
	export default {
		// 翻滚
		name: "killGoodsList",
		props: {
			group: {
				type: Number,
				default: 2,
			},
			type: {
				type: Number,
				default: 1, //1：一排一个，2：一排两个 3 ：瀑布流
			},

			goodData: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				waterfall: [
					[],
					[]
				],
				listData: [],
				isshow: false,
				page: 1,
				pageSize: 90,
			};
		},
		watch: {
			list: {
			    handler (newName, oldName) {
							this.$nextTick(() => {
									// 使用 querySelectorAll 获取所有带有 goodsItem 类的元素  
									let els = this.$el.querySelectorAll('.goodsItems'); // 注意这里使用了类选择器  
									els.forEach(el => {  
											// 确保元素有一个 clientHeight（可能是可见的）  
											if (el.clientHeight > 0) {  
													let rows = Math.ceil(el.clientHeight / 5) + 2;  
													el.style.gridRowEnd = `span ${rows}`;  
											}  
									});  
							}); 
			    },
			    immediate: true
			}
		},
		onload() {},
		mounted() {
			this.$nextTick(() => {
				this.getlist() //数据更新
			})
		},
		methods: {
			getlist() {
				let that = this
				that.$request({
					url: `api/goods_list_all/0/?page=${this.page}&size=${this.pageSize}&is_index=1`,
					method: 'get',
					success(resd) {
						if (resd.errno == 0) {
							console.log(resd)
							that.listData = resd.data.data
							that.waterfall=[[],[]]
							let isIndex=0
							resd.data.data.forEach((item,index)=>{
								let numIndex=Math.round(Math.random());
								that.waterfall[isIndex].push(item)
								if(isIndex==0){
									isIndex=1
								}else{
									isIndex=0
								}
							})
							setTimeout(function() {
								that.isshow = true
							}, 10)
						}
					}
				})
			},
			gogoodsdetail(id) {
				uni.navigateTo({
					url: '/pages/commodity/details?id=' + id
				})
			},
			formatNumber(num) {
			    // 检查数字是否为整数
			    if (Number.isInteger(num)) {
			        return num; // 如果是整数，直接返回
			    } else {
			        return num.toFixed(2); // 如果有小数点，返回两位小数
			    }
			}

		},
	}
</script>

<style lang="scss" scoped>
	.title{
		margin-top: 20upx;
		font-weight: bold;
		font-size: 16px;
		color: #000000;
		letter-spacing: 10px;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		image{
			width: 16px;
			margin-right: 10upx;
			height:20px;
		}
	}
	.goodsLists{
		margin-top: 20upx;
		width: calc(50% - 5px);
		
		.goodsItems{
			width: calc(100% - 20px);
			padding: 10px;
			margin-top: 20upx;
			background: #FFFFFF;
			box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.08);
			border-radius: 13px 13px 13px 13px;
		.goodsImage{
			width: 100%;
			height: 143px;
			image{
				width: 100%;
				height: 143px;
			}
		}
			// .btn{
			// 	width: 25px;
			// 	height: 25px;
			// 	background: #FD3445;
			// 	border-radius: 50%;
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: center;
			// }
		}
	}
	.goodsListOne{
		padding: 20upx;
		.goodsItem{
			width: calc(100% - 20px);
			padding: 10px;
			margin-top: 20upx;
			background: #FFFFFF;
			box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.08);
			border-radius: 13px 13px 13px 13px;
			display: flex;
			.goodsImage{
				margin-right: 10px;
				width: 110px;
				height: 110px;
				image{
					width: 110px;
					height: 110px;
				}
			}
			.goodsDetail{
				width: calc(100% - 120px);
				height: 110px;
			}
		}
	}
	.goodsList{
		margin-top: 20upx;
		display: flex;
		flex-wrap: wrap;
	
		.goodsItem:nth-child(odd) {  
		    margin-right: 1.5%; /* 奇数项右边距 */  
		}  
		.goodsItem:nth-child(even) {  
		    margin-left: 1.5%; /* 偶数项左边距 */  
		}
	
		.goodsItem{
			width: calc(48.5% - 20px);
			padding: 10px;
			margin-top: 20upx;
			background: #FFFFFF;
			box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.08);
			border-radius: 13px 13px 13px 13px;
			.goodsImage{
				width: 100%;
				height: 143px;
				image{
					width: 100%;
					height: 143px;
				}
			}
	
		}
	}
	.goodsDetail{
		min-height: 70px;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		.goodsName{
			font-weight: bold;
			font-size: 13px;
			color: #000000;
			line-height: 20px;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
		.securities{
			margin: 5px 0;
			width: 70px;
			font-weight: 500;
			font-size: 10px;
			color: #FD3445;
			text-align: left;
			border: 1px solid #FD3445;
			border-radius: 3px;
			text{
				padding: 0 2px;
				color: #FFFFFF;
				background-color: #FD3445;
			}
		}
		.bottomPrice{
			width: 100%;
			display: flex;
			justify-content: space-between;
				align-items: flex-end;
			.left{
				display: flex;
				align-items: flex-end;
				.price{
					font-weight: bold;
					font-size: 10px;
					color: #FF0034;
					text-align: left;
					font-style: normal;
					text-transform: none;
					text{
						font-size: 16px;
					}
				}
				.money{
					display: none;
					margin-left: 5px;
					font-weight: 500;
					font-size: 10px;
					color: #909090;
					text-align: left;
					font-style: normal;
					text-decoration-line: line-through;
					text-transform: none;
				}
			}

		}
	}
	uni-image{
		height: auto;
	}
</style>